<template>
  <el-dialog v-model="dialogVisible" title="学院进度" :close-on-click-modal="false" width="80%" @close="falsedialogVisible">
    <div>
      <div class="title-flex">
        <el-select v-model="unitId" placeholder="单位名称" clearable style="width: 240px" @focus="getdanweimingchengOptions"
          @change="clickdanweimingcheng">
          <el-option v-for="item in danweimingchengOptions" :key="item.codeColumn" :label="item.valueColumn"
            :value="item.codeColumn" />
        </el-select>
        <div style="margin: 0 0 10px 10px">
          <el-button @click="download"><svg-icon iconClass="export" class="mr-[5px]"></svg-icon>导出</el-button>
        </div>
      </div>
      <div>
        <el-table border style="width: 100%" :data="tableData" @sort-change="handleSortChange">
          <el-table-column prop="unitName" label="单位名称" sortable="bu.NAME"></el-table-column>
          <el-table-column prop="authorizeDate" label="立项年度" sortable="YEAR(p.authorize_date)"></el-table-column>
          <el-table-column prop="executeYear" label="执行周期" sortable="execute_Year"></el-table-column>
          <el-table-column prop="executeYear" label="合同金额" sortable="FEE_AUTHORIZE"></el-table-column>
          <el-table-column label="到账率" sortable="incomeRate">
            <template #default="{ row }">
              <el-progress
                :percentage="row.incomeRate!== null? parseFloat(row.incomeRate.replace('%', '')) : 0"></el-progress>
            </template>
          </el-table-column>
          <el-table-column label="执行率" sortable="executeRate">
            <template #default="{ row }">
              <el-progress
                :percentage="row.executeRate !== null ? parseFloat(row.executeRate.replace('%', '')) : 0"></el-progress>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100">
            <template #default="scope">
              <!--              <el-button  link type="primary" size="small" @click="handleEdit(scope.row)">学院进度</el-button>-->
              <el-button plain type="primary" size="small" @click="handleDelete(scope.row)">项目进度</el-button>
              <!--              <el-button  link type="primary" size="small" @click="handleDelete(scope.row)">科目进度</el-button>-->
            </template>
          </el-table-column>
        </el-table>
        <div class="example-pagination-block">
          <el-pagination layout="->,prev, pager, next, total" :total="count" currentPage1="10"
            @current-change="handleCurrentChange" />
        </div>
      </div>

      <zxjdDialogxmjd ref="Dialogxmjd"></zxjdDialogxmjd>

    </div>
  </el-dialog>


</template>

<script setup lang="ts">
import {handleFileDownload} from './../../../utils/downloadSz'
import { ref } from 'vue';
import {
  unitlist,getCategory,exportunit
} from '../../../api/money/zxjdApi'
const orderByColumn =ref("bu.NAME");
const isAsc = ref("descending");
//分页
const handleCurrentChange = (val: string) => {
  unitlist({
    unitId:unitId.value,
    orderByColumn:orderByColumn.value,
    isAsc:isAsc.value,
    pageNum:val,
    pageSize:10,
    ...rows.value
  }).then((res)=>{
    count.value = res.total
    tableData.value = res.rows

  })
  console.log(`current page: ${val}`)
}
//关闭弹窗事件
const falsedialogVisible = function (){
  unitId.value = ''
  //alert('1')
  dialogVisible.value=false
}

const unitId = ref('')
const clickdanweimingcheng = () => {
  openDialogxyjd(rows.value)
}

//职称
const danweimingchengOptions = ref([])
const getdanweimingchengOptions =function () {
  //职称
  getCategory(
      {
        'bizName':'成果归属单位'
      }
  )
      .then((res)=>{

        danweimingchengOptions.value = res.data
      })
}

import zxjdDialogxmjd from './zxjdDialogxmjd.vue'
import {ElMessage} from "element-plus";
const Dialogxmjd = ref(null)


const getListParme = defineModel();

const dialogVisible = ref(false)

const count = ref(0)

const handleDelete = (row) => {
  Dialogxmjd.value.openDialogxmjd(row)
}
//临时储存row
const rows = ref()
//请求列表
const openDialogxyjd = function (row) {
  //unitId.value = ''
 rows.value = row
  dialogVisible.value = true
  console.log(row)
  // 复制一份 getListParme 对象，避免修改原始数据
  const requestData = { ...row };
  // 将 unitld 从数组转换为字符串
  if (Array.isArray(requestData.projectTypeCode)) {
    // requestData.projectTypeCode = requestData.projectTypeCode.join(',');//项目分类
    // requestData.executeYear = requestData.executeYear.join(',');//执行周期
  }
  console.log(requestData)
  unitlist({
    unitId:unitId.value,
    orderByColumn:orderByColumn.value,
    isAsc:isAsc.value,
    pageNum:1,
    pageSize:10,
    ...row
  }).then((res)=>{
    count.value = res.total
    tableData.value = res.rows

  })

}

const download = () => {

  exportunit({
    unitId:unitId.value,
    ...rows.value
  })
      .then((res)=>{
        if (!(res instanceof Blob)) {
          ElMessage({
            type: 'info',
            message: '响应数据不是 Blob 类型',
          })
        }else {
          handleFileDownload(res, '学院进度');
        }
      })
}

// 初始表格数据
const tableData = ref([
//   authorizeDate: "2025"//立项年度
// beginDate: null
// chargerName: null
// executeRate: "0.00000088028169"//执行率
// executeYear: null //执行周期
// feeAuthorize: null
// incomeFee: null
// incomeRate: "24.4718309859" //到账率
// payoutFee: null
// projectId: null
// projectName: null
// projectTypeCode: "Z07"
// projectTypeCodeName: "国家自然科学基金"//项目分类
// unitId: null
// unitName: null
//   {
//     id: 1,
//     projectTypeCodeName: '科研项目',
//     authorizeDate: '2025',
//     executeYear: '2025 - 2026',
//     incomeRate: '80%',
//     executeRate: '70%',
//     hasChildren: true
//   },
//   {
//     id: 2,
//     projectTypeCodeName: '教学项目',
//     authorizeDate: '2024',
//     executeYear: '2024 - 2025',
//     incomeRate: '90%',
//     executeRate: '85%',
//     hasChildren: false
//   }
]);



// 处理排序变化的函数
// prop：表示当前进行排序的列对应的字段名
// order：表示当前的排序顺序，有三种可能的值：
// 'ascending'：代表正序排序。
// 'descending'：代表倒序排序。
// null：表示取消排序，在当前代码中暂未对该情况进行处理。

const handleSortChange = (row) => {
  orderByColumn.value = row.column.sortable;
  isAsc.value=row.order;
  openDialogxyjd(rows.value);
};

defineExpose({
  openDialogxyjd,
});
</script>

<style scoped>
.title-flex{
  display: flex;
}
</style>